<template>
  <div class="image-panel">
    <!-- 画面图片 -->
    <el-image class="image-panel-image" fit="fill" :src="imagePanelImage" />
    <!-- 广角标识 -->
    <div class="wide-angle-flag">广角  1X</div>
    <!-- 变焦标识 -->
    <div class="zoom-flag">变焦</div>
    <!-- 聚焦框 -->
    <div class="focus-rectangle">
      <img class="focus-rectangle-image" :src="focusRectangle" alt="聚焦框" />
      <img class="focus-rectangle-point-image" :src="focusRectanglePoint" alt="聚焦点"/>
    </div>
  </div>
</template>

<script setup>
import imagePanelImage from '@/assets/images/image_panel_image.png' // 画面图片
import focusRectangle from '@/assets/images/image_panel_focus_rectangle.png' // 聚焦框
import focusRectanglePoint from '@/assets/icons/image_panel_focus_point.png' // 聚焦点
</script>

<style lang="scss" scoped>
.image-panel {
  position: relative;
  width: 530px;
  height: 298px;
  border: 2px solid #fff;
  background: rgba(5, 80, 122, 1);
  // 画面图片
  .image-panel-image {
    width: 100%;
    height: 100%;
  }
  // 广角标识
  .wide-angle-flag {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    width: 80px;
    height: 28px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    border: 2px solid rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.6);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 12px;
  }
  // 变焦标识
  .zoom-flag {
    position: absolute;
    top: 50%;
    left: 17px;
    z-index: 2;
    transform: translateY(-50%);
    width: 40px;
    height: 22px;
    border-radius: 4px;
    background: rgba(20, 109, 142, 1);
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: rgba(255, 255, 255, 1);
  }
  // 聚焦框
  .focus-rectangle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 264px;
    height: 168px;
    .focus-rectangle-image {
      width: 100%;
      height: 100%;
    }
    .focus-rectangle-point-image {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
    }
  }
}
</style>